<template>
    <div class="spage">
        <topnav pageindex="2" :cointype.sync="cointype" pagename="minerpage"></topnav>
        <div class="contentwrap">
            <div class="maincontent">
                <div class="swrap">
                    <el-row>
                        <el-col :span="12" :offset="6">
                            <el-row>
                                <el-col :span="19">
                                    <el-input v-model="minerAddr" :placeholder="cointype+'账号地址'"></el-input>
                                </el-col>
                                <el-col :span="4" :offset="1">
                                    <el-button type="primary" @click="searchData()">查看挖矿状态</el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <div class="urltoblock">
                        <a :href="'http://web.poolgpu.com/blocks.html?coinType='+(cointype.toUpperCase())" target="_blank">查看区块信息</a>
                    </div>
                </div>
                <div v-show="hasData">
                    <div class="minerstat" v-show="hasData">
                        <h3 class="tit">Miner:{{minerTempAddr}}</h3>
                        <div class="mainstat">
                            <div class="cardwrap">
                                <div class="eachcard">
                                    <el-card>
                                        <div class="stat_title">总算力</div>
                                        <div class="stat_data">{{minerstat.allHrate}}</div>
                                    </el-card>
                                </div>
                                <div class="eachcard" v-if="minerstat.ppsHrate!==undefined">
                                    <el-card>
                                        <div class="stat_title">PPS算力</div>
                                        <div class="stat_data">{{minerstat.ppsHrate}}</div>
                                    </el-card>
                                </div>
                                <div class="eachcard" v-if="(minerstat.pplnsHrate!==undefined)&&(cointype.toLowerCase()!='xwc')">
                                    <el-card>
                                        <div class="stat_title">PPLNS算力</div>
                                        <div class="stat_data">{{minerstat.pplnsHrate}}</div>
                                    </el-card>
                                </div>
                                <div class="eachcard">
                                    <el-card>
                                        <div class="stat_title">未支付的余额</div>
                                        <div class="stat_data">{{minerstat.balance/(Math.pow(10,9))}}</div>
                                    </el-card>
                                </div>
                                <div class="eachcard">
                                    <template v-if="cointype.toLowerCase()!='sc'">
                                        <el-card>
                                            <div class="stat_title">PPS在线/PPLNS在线/离线</div>
                                            <div class="stat_data">{{onlineArr.length+" / "+pplnsOnlineArr.length+" / "+offlineArr.length}}</div>
                                        </el-card>
                                    </template>
                                    <template v-if="cointype.toLowerCase()=='sc'">
                                        <el-card>
                                            <div class="stat_title">矿机状态(在线/离线)</div>
                                            <div class="stat_data">{{minerstat.workersOnline+" / "+minerstat.workersOffline}}</div>
                                        </el-card>
                                    </template>
                                </div>
                                <div class="eachcard">
                                    <el-card>
                                        <div class="stat_title">24小时收益</div>
                                        <div class="stat_data">{{(minerstat.prolastday/(Math.pow(10,9))).toFixed(6)}}</div>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="minerdetail">
                        <h3 class="tit">矿工详情</h3>
                        <div class="maindetail">
                            <div class="tabswrap">
                                <el-tabs v-model="detailTab" type="card" @tab-click="tabChange">
                                    <el-tab-pane label="数据板" name="datapart">数据板</el-tab-pane>
                                    <el-tab-pane label="矿池转账" name="poolpay">矿池转账</el-tab-pane>
                                </el-tabs>
                            </div>
                            <div class="detailwrap">
                                <div class="datawrap" v-show="showTab==1">
                                    <div class="chartwrap">
                                        <div id="mhchart"></div>
                                    </div>
                                    <div class="chartwrap">
                                        <div id="mnchart"></div>
                                    </div>
                                    <div class="datawrap">
                                        <div class="tabsdiv" v-if="cointype.toLowerCase()=='sc'">
                                            <span @click="changeScWshow(1)" v-bind:class="{ischoosed: (showWorkersType==1)}">在线矿机({{minerstat.workersOnline}})&nbsp;|&nbsp;</span>
                                            <span @click="changeScWshow(0)" v-bind:class="{ischoosed: (showWorkersType==2)}">离线矿机({{minerstat.workersOffline}})</span>
                                        </div>
                                        <div class="tabsdiv" v-if="cointype.toLowerCase()!='sc'">
                                            <span @click="changeWshow(1)" v-bind:class="{ischoosed: (showWorkersType==1)}">PPS在线矿机({{onlineArr.length}})&nbsp;|&nbsp;</span>
                                            <span @click="changeWshow(2)" v-bind:class="{ischoosed: (showWorkersType==3)}">PPLNS在线矿机({{pplnsOnlineArr.length}})&nbsp;|&nbsp;</span>
                                            <span @click="changeWshow(0)" v-bind:class="{ischoosed: (showWorkersType==2)}">离线矿机({{offlineArr.length}})</span>
                                        </div>
                                        <div class="wswrap">
                                            <span>搜索:</span>
                                            <span v-if="cointype.toLowerCase()!='sc'">
                                                <el-input v-model="wsWord" @change="wsChange()"></el-input>
                                            </span>
                                            <span v-if="cointype.toLowerCase()=='sc'">
                                                <el-input v-model="wsWord" @change="wsScChange()"></el-input>
                                            </span>
                                        </div>
                                        <div class="tbdiv">
                                            <el-table
                                                :data="showWorkersData"
                                                stripe>
                                                <el-table-column
                                                    prop="name"
                                                    label="矿机"
                                                    class-name="width15">
                                                </el-table-column>
                                                <el-table-column
                                                    prop="hhr"
                                                    label="半小时平均算力"
                                                    class-name="width15">
                                                </el-table-column>
                                                <el-table-column
                                                    prop="thr"
                                                    label="3小时平均算力"
                                                    class-name="width35">
                                                </el-table-column>
                                                <el-table-column
                                                    prop="lsubTime"
                                                    label="最后一次提交"
                                                    class-name="width35">
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                </div>
                                <div class="paywrap" v-show="showTab==2">
                                    <div class="chartwrap">
                                        <div id="paychart"></div>
                                    </div>
                                    <div class="datawrap">
                                        <el-table
                                            :data="paylistData"
                                            stripe>
                                            <el-table-column
                                                prop="payTime"
                                                label="转账时间">
                                            </el-table-column>
                                            <el-table-column
                                                prop="payId"
                                                label="转账ID">
                                                <template scope="scope">
                                                    <a :href="scope.row.payTx" target="_blank">{{scope.row.payId}}</a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="payNumber"
                                                label="付款金额">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div class="pager-wrap" v-if="cointype!='sc'">
                                        <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page.sync="currentPage1"
                                            :page-size="20"
                                            layout="prev, pager, next, jumper"
                                            :total="totalNum">
                                        </el-pagination>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footemp></footemp>
    </div>
</template>
<script>
    import topnav from '@/components/common/topnav.vue';
    import footemp from "@/components/common/footer.vue";
    import echarts from 'echarts';
    var hchart;
    var mchart;
    var pchart;
    var tempPaylist = [];
    let requrl = {
        eth: {
            mstat: "http://eth-api.poolgpu.com/api/accounts/",
            minerh: "http://eth-api.poolgpu.com/api/history-hashrate/",
            minerw: "http://eth-api.poolgpu.com/api/history-workers-online/",
            pagepayments: "http://eth-api.poolgpu.com/api/paging-payments/",
            payblockurl: "https://etherscan.io/tx/"
        },
        etc: {
            mstat: "http://etc-api.poolgpu.com/api/accounts/",
            minerh: "http://etc-api.poolgpu.com/api/history-hashrate/",
            minerw: "http://etc-api.poolgpu.com/api/history-workers-online/",
            pagepayments: "http://etc-api.poolgpu.com/api/paging-payments/",
            payblockurl: "http://gastracker.io/tx/"
        },
        exp: {
            mstat: "http://exp-api.poolgpu.com/api/accounts/",
            minerh: "http://exp-api.poolgpu.com/api/history-hashrate/",
            minerw: "http://exp-api.poolgpu.com/api/history-workers-online/",
            pagepayments: "http://exp-api.poolgpu.com/api/paging-payments/",
            payblockurl: "http://www.gander.tech/tx/"
        },
        sc: {
            mstat: "http://sia-api.poolgpu.com/api/accounts/",
            minerh: "http://sia-api.poolgpu.com/api/history-hashrate/",
            minerw: "http://sia-api.poolgpu.com/api/history-workers-online/",
            pagepayments: "http://sia.poolgpu.com/api/paging-payments/",
            payblockurl: "https://explore.sia.tech/hash.html?hash="
        },
        xwc: {
            mstat: "http://47.75.179.214:8080/api/accounts/",
            minerh: "http://47.75.179.214:8080/api/history-hashrate/",
            minerw: "http://47.75.179.214:8080/api/history-workers-online/",
            pagepayments: "http://47.75.179.214:8080/api/paging-payments/",
            payblockurl: "http://explorer2.whitecoin.info/tx/"
        }
    }
    export default {
        data() {
            return {
                cointype: "",
                hasData: false,
                detailTab: "datapart",
                showTab: 1,
                minerAddr: "",
                minerTempAddr: "",
                minerstat: {
                    hrate: "",
                    balance: "",
                    workersOnline: "",
                    workersOffline: "",
                    prolastday: ""
                },
                minerData: [],
                payData: [],
                showWorkersData: [],
                totalWorkers: [],
                onlineArr: [],
                pplnsOnlineArr: [],
                offlineArr: [],
                showWorkersType: 0,
                wsWord: "",
                paylistData: [],
                currentPage1: 1,
                totalNum: 0
            }
        },
        watch: {
            cointype: function(newValue, oldValue) {
                if(!oldValue) return;
                if((newValue.toLowerCase()) != (oldValue.toLowerCase())) {
                    this.minerAddr = "";
                    window.location.href = "/#/minerpage?cointype=" + this.cointype;
                    window.location.reload();
                }
            },
            hasData: function(newValue, oldValue) {
                if(newValue) {
                    if(hchart) setTimeout(function() {
                        hchart.resize();
                    },0);
                    if(mchart) setTimeout(function() {
                        mchart.resize();
                    },0);
                    if(pchart) setTimeout(function() {
                        pchart.resize();
                    },0);
                }
            }
        },
        methods: {
            searchData: function() {
                if(this.minerAddr) {
                    window.location.href = "/#/minerpage?cointype=" + this.cointype + "&miner=" + this.minerAddr;
                    window.location.reload();
                }
            },
            tabChange: function(tab, event) {
                if(tab.name == "datapart") {
                    this.showTab = 1;
                } else {
                    this.showTab = 2;
                    if(pchart) {
                        setTimeout(function(){
                            pchart.resize();
                        },0);
                    }
                }
            },
            createhCharts: function() {
                var that = this;
                var option;
                this.api.get({
                    url:(requrl[that.cointype.toLowerCase()].minerh+that.minerAddr),
                    callback: function(data) {
                        if(data.hasOwnProperty("error")) {
                            return
                        }
                        var ds = {
                            hrate: [],
                            avg: [],
                            label: []
                        };
                        data.forEach(function(item, idx) {
                            if(idx % 6 == 0) {
                                ds.hrate.push((item['hr']/1000000).toFixed(2));
                                ds.avg.push((item['avgHR']/1000000).toFixed(2));
                                ds.label.push(that.api.dateFormat(item.timestamp*1000, 'yyyy-MM-dd hh:mm:ss'));
                            }
                        })
                        option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            title: {
                                text: '算力:单位（MH）',
                                left: 0,
                                textStyle: {
                                    fontWeight: 'normal',
                                    fontSize: 14
                                }
                            },
                            legend: {
                                icon: 'rect',
                                data: ['当前有效算力', '平均有效算力'],
                                textStyle: {
                                    fontSize: 12
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ds.label,
                                splitNumber: 10,
                                axisLabel: {
                                    show: true
                                },
                                axisTick: {
                                    show: false
                                }
                            },
                            yAxis: {
                                type: 'value',
                                position: 'left',
                                animation: true,
                                splitNumber: 5
                            },
                            series: [{
                                name: '当前有效算力',
                                type: 'line',
                                barMaxWidth: '20',
                                data: ds.hrate,
                                smooth: true,
                                itemStyle: {
                                    normal: {}
                                }
                            },{
                                name: '平均有效算力',
                                type: 'line',
                                barMaxWidth: '20',
                                data: ds.avg,
                                smooth: true,
                                itemStyle: {
                                    normal: {}
                                }
                            },]
                        };
                        hchart.setOption(option);
                    }
                });
            },
            createmCharts: function() {
                var that = this;
                var option;
                this.api.get({
                    url:(requrl[that.cointype.toLowerCase()].minerw+that.minerAddr),
                    callback: function(data) {
                        if(data.hasOwnProperty("error")) {
                            return
                        }
                        var ds = {
                            workers: [],
                            label: []
                        };
                        data.forEach(function(item, idx) {
                            ds.workers.push(item['workers_online']);
                            ds.label.push(that.api.dateFormat(item.timestamp*1000, 'yyyy-MM-dd hh:mm:ss'));
                        });
                        option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            title: {
                                text: '矿机',
                                left: 0,
                                textStyle: {
                                    fontWeight: 'normal',
                                    fontSize: 14
                                }
                            },
                            legend: {
                                icon: 'rect',
                                data: ['在线矿机'],
                                textStyle: {
                                    fontSize: 12
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ds.label,
                                splitNumber: 10,
                                axisLabel: {
                                    show: true
                                },
                                axisTick: {
                                    show: false
                                }
                            },
                            yAxis: {
                                type: 'value',
                                position: 'left',
                                animation: true,
                                splitNumber: 5
                            },
                            series: [{
                                name: '在线矿机',
                                type: 'line',
                                barMaxWidth: '20',
                                data: ds.workers,
                                smooth: true,
                                itemStyle: {
                                    normal: {
                                        color: '#1F77B4'
                                    }
                                }
                            }]
                        };
                        mchart.setOption(option);
                    }
                });
            },
            createpCharts: function(pdata) {
                var that = this;
                var option;
                var ds = {
                    amounts: [],
                    label: []
                }
                pdata.forEach(function(item, idx) {
                    ds.amounts.push((item.amount/(Math.pow(10,9))).toFixed(2));
                    ds.label.push(that.api.dateFormat(item.timestamp*1000, 'yyyy-MM-dd hh:mm:ss'));
                });
                option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    title: {
                        text: '转账记录',
                        left: 0,
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 14
                        }
                    },
                    legend: {
                        icon: 'rect',
                        data: [that.cointype.toUpperCase()],
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ds.label,
                        splitNumber: 10,
                        axisLabel: {
                            show: true
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        position: 'left',
                        animation: true,
                        splitNumber: 5
                    },
                    series: [{
                        name: that.cointype.toUpperCase(),
                        type: 'line',
                        barMaxWidth: '20',
                        data: ds.amounts,
                        smooth: true,
                        itemStyle: {
                            normal: {}
                        }
                    }]
                };
                pchart.setOption(option);
            },
            initScWorkers: function(workers) {
                let that = this;
                for(var i in workers) {
                    let tempName = i;
                    let tempHhr = that.api.unitCover(workers[i].hr);
                    let tempThr = that.api.unitCover(workers[i].hr2);
                    let tempLsubTime = that.api.dateFormat(parseInt(workers[i].lastBeat)*1000, "yyyy-MM-dd hh:mm:ss");
                    let isOnline = !(workers[i].offline);
                    let tempObj = {
                        name: tempName,
                        hhr: tempHhr,
                        thr: tempThr,
                        lsubTime: tempLsubTime
                    }
                    that.totalWorkers.push(tempObj);
                    if(isOnline) {
                        that.onlineArr.push(tempObj);
                    } else {
                        that.offlineArr.push(tempObj);
                    }
                }
                that.showWorkersData = that.totalWorkers;
            },
            initWorkers: function(workers) {
                let that = this;
                for(var i in workers) {
                    let tempName = i;
                    let tempHhr = that.api.unitCover((workers[i].hrPPS) || (workers[i].hrPPLNS));
                    let tempThr = that.api.unitCover((workers[i].hr2PPS) || (workers[i].hr2PPLNS));
                    let tempLsubTime = that.api.dateFormat(parseInt(workers[i].lastBeat)*1000, "yyyy-MM-dd hh:mm:ss");
                    let isPpsOnline = !(workers[i].offlinePPS);
                    let isPplnsOnline = !(workers[i].offlinePPLNS);
                    let tempObj = {
                        name: tempName,
                        hhr: tempHhr,
                        thr: tempThr,
                        lsubTime: tempLsubTime
                    }
                    that.totalWorkers.push(tempObj);
                    if(isPpsOnline) {
                        that.onlineArr.push(tempObj);
                    }
                    if(isPplnsOnline) {
                        that.pplnsOnlineArr.push(tempObj);
                    }
                    if((!isPpsOnline) && (!isPplnsOnline)) {
                        that.offlineArr.push(tempObj);
                    }
                }
                that.showWorkersData = that.totalWorkers;
            },
            initPaylist: function(maindata) {
                var that = this;
                that.paylistData = [];
                for(var i = 0; i < maindata.length; i ++) {
                    that.paylistData.push({
                        payTime: that.api.dateFormat((maindata[i].timestamp)*1000, "yyyy-MM-dd hh:mm:ss"),
                        payId: maindata[i].tx,
                        payNumber: ((maindata[i].amount)/(Math.pow(10,9))),
                        payTx: requrl[that.cointype.toLowerCase()].payblockurl + maindata[i].tx
                    });
                }
            },
            changeScWshow: function(type) {
                if(type) {
                    this.showWorkersData = this.onlineArr;
                    this.showWorkersType = 1;
                } else {
                    this.showWorkersData = this.offlineArr;
                    this.showWorkersType = 2;
                }
                this.wsWord = "";
            },
            changeWshow: function(type) {
                if(type == 1) {
                    this.showWorkersData = this.onlineArr;
                    this.showWorkersType = 1;
                } else if(type == 2) {
                    this.showWorkersData = this.pplnsOnlineArr;
                    this.showWorkersType = 3;
                } else {
                    this.showWorkersData = this.offlineArr;
                    this.showWorkersType = 2;
                }
                this.wsWord = "";
            },
            wsScChange: function() {
                let that = this;
                let sWord = that.wsWord;
                let resArr = [];
                if(that.showWorkersType == 0) {
                    resArr = that.totalWorkers;
                } else if(that.showWorkersType == 1) {
                    resArr = that.onlineArr;
                } else {
                    resArr = that.offlineArr;
                }
                if(sWord === "") {
                    that.showWorkersData = resArr;
                } else {
                    let newResArr = [];
                    for(var i = 0; i < resArr.length; i ++) {
                        if((resArr[i].name).indexOf(sWord) != (-1)) {
                            newResArr.push(resArr[i]);
                        }
                    }
                    that.showWorkersData = newResArr;
                }
            },
            wsChange: function() {
                let that = this;
                let sWord = that.wsWord;
                let resArr = [];
                if(that.showWorkersType == 0) {
                    resArr = that.totalWorkers;
                } else if(that.showWorkersType == 1) {
                    resArr = that.onlineArr;
                } else if(that.showWorkersType == 3) {
                    resArr = that.pplnsOnlineArr;
                } else {
                    resArr = that.offlineArr;
                }
                if(sWord === "") {
                    that.showWorkersData = resArr;
                } else {
                    let newResArr = [];
                    for(var i = 0; i < resArr.length; i ++) {
                        if((resArr[i].name).indexOf(sWord) != (-1)) {
                            newResArr.push(resArr[i]);
                        }
                    }
                    that.showWorkersData = newResArr;
                }
            },
            handleSizeChange: function() {},
            handleCurrentChange: function() {
                this.getPagePayments();
            },
            getPagePayments: function() {
                let that = this;
                that.api.get({
                    url: (requrl[that.cointype.toLowerCase()].pagepayments+that.minerAddr),
                    data: {
                        page: (parseInt(that.currentPage1) - 1),
                        pageCount: 20
                    },
                    callback: function(data) {
                        if(data) {
                            that.initPaylist(data);
                        }
                    }
                });
            },
            initPage: function() {
                let that = this;
                if(!that.minerAddr) {
                    that.hasData = false;
                    return;
                }
                that.minerTempAddr = this.minerAddr;
                that.api.get({
                    url: (requrl[that.cointype.toLowerCase()].mstat+that.minerAddr),
                    callback: function(data) {
                        if(data) {
                            that.hasData = true;
                            that.minerstat.allHrate = that.api.unitCover(data.currentHashrate);
                            if(data.currentHashratePPLNS) {
                                that.minerstat.pplnsHrate = that.api.unitCover(data.currentHashratePPLNS);
                            } else {
                                that.minerstat.pplnsHrate = undefined;
                            }
                            if(data.currentHashratePPS) {
                                that.minerstat.ppsHrate = that.api.unitCover(data.currentHashratePPS);
                            } else {
                                that.minerstat.ppsHrate = undefined;
                            }
                            that.minerstat.balance = data.stats.balance;
                            that.minerstat.workersOnline = data.workersOnline;
                            that.minerstat.workersOffline = data.workersOffline;
                            that.minerstat.prolastday = data.stats.profitLastDay;
                            if(data.payments) {
                                if(that.cointype.toLowerCase() == "sc") {
                                    that.initPaylist(data.payments);
                                } else {
                                    that.totalNum = parseInt(data.paymentsTotal);
                                }
                                data.payments.reverse();
                                that.createpCharts(data.payments);
                                tempPaylist = data.payments;
                            }
                            if(that.cointype.toLowerCase() != "sc") {
                                that.initWorkers(data.workers);
                            } else {
                                that.initScWorkers(data.workers);
                            }
                        } else {
                            that.hasData = false;
                        }
                    },
                    error: function(xh, msg, err) {
                        that.hasData = false;
                    }
                });
                that.api.get({
                    url: requrl[that.cointype.toLowerCase()].miners,
                    callback: function(data) {
                        if(data) {
                            var tempdata = [];
                            var minersres = data.miners;
                            for(var i in minersres) {
                                tempdata.push({
                                    addr: i,
                                    hrate: minersres[i].hr,
                                    subTime: that.api.dateFormat(parseInt(minersres[i].lastBeat)*1000, "yy-MM-dd hh:mm")
                                });
                            }
                            tempdata.sort(function(a, b) {
                                return (b.hrate - a.hrate);
                            });
                            that.minerData = tempdata.slice(0, 20);
                        }
                    }
                });
                if(that.cointype.toLowerCase() != "sc") that.getPagePayments();
                that.createhCharts();
                that.createmCharts();
            }
        },
        beforeMount: function() {
            this.cointype = this.$route.query.cointype.toLowerCase();
            if(this.$route.query.miner) {
                this.minerAddr = this.$route.query.miner;
            }
        },
        mounted: function() {
            hchart = echarts.init(document.getElementById("mhchart"));
            mchart = echarts.init(document.getElementById("mnchart"));
            pchart = echarts.init(document.getElementById("paychart"));
            this.initPage();
        },
        components: {
            topnav,
            footemp
        }
    }
</script>
<style>
    .mpage .tl .tl_word {
        display: inline-block;
        vertical-align: middle;
    }
    .spage .contentwrap {
        min-width: 790px;
    }
    .spage .contentwrap .maincontent {
        width: 95%;
        min-width: 800px;
        margin: 30px auto;
    }
    .spage .swrap {
        text-align: left;
        padding: 20px;
        background-color: #ffffff;
        box-shadow: 1px 1px 1px #ffffff;
        font-size: 26px;
        border: 1px solid #ffffff;
        position: relative;
    }
    .spage .swrap .sdiv {
        display: inline-block;
    }
    .mpage .tl_pic {
        background-image: url(../assets/imgs/newtj.png);
        background-size: 100% 100%;
        margin-right: 10px;
    }
    .spage .minerstat,.spage .minerdetail {
        background-color: #ffffff;
        margin-top: 15px;
    }
    .spage .tit {
        padding: 15px;
        border-bottom: 1px solid #9c9c9c;
        text-align: left;
        font-size: 16px;
    }
    .spage .minerstat .mainstat {
        padding: 30px;
    }
    .spage .minerstat .stat_title {
        padding-bottom: 15px;
        border-bottom: 1px solid #9c9c9c;
        color: #888888;
        font-weight: bold;
    }
    .spage .minerdetail .maindetail {
        padding: 10px;
    }
    .spage .minerstat .stat_data {
        padding: 15px;
        font-family: "Arial Black";
        color: #e96b3a;
    }
    .mpage #ratechart {
        width: 98%;
        height: 380px;
        margin: 15px auto 0px auto;
    }
    .mpage .el-table th {
        text-align: center;
    }
    .mpage .minerwrap,.mpage .digwrap {
        padding: 10px;
    }
    .mpage .topminer,.mpage .digdetail {
        margin-top: 15px;
    }
    .mpage .wbg {
        background-color: #ffffff;
    }
    .mpage .digdetail a {
        color: #276ab0;
        text-decoration: none;
    }
    .mpage .width15 {
        width: 15%;
    }
    .mpage .width35 {
        width: 35%;
    }
    .spage #mhchart,.spage #mnchart,.spage #paychart {
        height: 380px;
        width: 90%;
        margin: 15px auto 0px auto;
    }
    .spage .el-table th {
        text-align: center;
    }
    .spage .tabsdiv .ischoosed {
        color: #20a0ff;
    }
    .spage .tabsdiv span {
        font-size: 20px;
        cursor: pointer;
    }
    .spage .wswrap span {
        display: inline-block;
    }
    .spage .wswrap {
        float: right;
        margin: 20px;
    }
    .spage .urltoblock {
        position: absolute;
        top: 19px;
        right: 60px;
    }
    .spage .urltoblock a {
        font-size: 14px;
        color: #276ab0;
    }
    .spage .cardwrap {
        text-align: center;
    }
    .spage .cardwrap .eachcard {
        display: inline-block;
        width: 155px;
        font-size: 14px;
        margin-right: 30px;
        word-wrap: break-word;
    }
    .spage .el-card__body {
        height: 100px;
        padding: 10px;
    }
    .spage .datawrap a {
        color: #276ab0;
        text-decoration: none;
    }
</style>